import React, { Component } from 'react';
import axios from 'axios';

class Head extends Component {

    search=()=>{
        this.props.changeSearchObj({isFirst:false,isLoading:true})
       const {keyWordElement:{value:keyword}}=this
       axios.get('/api1/search/userse?q='+keyword).then(
           response=>{
            const searchObj={isFirst:false,isLoading:false,users:response.data.items}   
            this.props.changeSearchObj(searchObj)
           },
           error=>{
            this.props.changeSearchObj({isLoading:false,error:error})
           }
       )
    }

    render() {
        return (
            <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
                <input type="text" ref={c=>this.keyWordElement=c}  placeholder="enter the name you search"/>&nbsp;
                <button onClick={this.search}>Search</button>
            </div>
            </section>
        );
    }
}

export default Head;